<template>
  <div class="layout">
    <div class="container">
      <div class="demo-image__preview container_img">
        <div class="checked">
          <el-checkbox v-model="checked1"></el-checkbox>
        </div>
        <div class="radar_icon"></div>
        <el-image style="width: 310px; height: 200px" :src="url" :preview-src-list="srcList" :preview-teleported="true" :initial-index="1" fit="cover"> </el-image>
      </div>
      <div class="container_text">
        <div class="tagList">
          <div class="tag_item">少女战士</div>
          <div class="tag_item">女团少女</div>
          <div class="tag_item">女团</div>
          <div class="tag_item">女团战士</div>
        </div>
        <div class="describe">
          <span class="describe_text"> 图片等名称不能太长问问额外企鹅王企第三方的思维 </span>
          <span class="describe_format">.jpg</span>
        </div>
        <div class="time">
          <span>2022-01-03 13:32</span>
          <span>上传者：张无忌</span>
        </div>
      </div>
      <div class="iconList">
        <div class="icon_item" v-for="index in 4" :key="index" @click="select(index)">
          <img :id="index" :src="`/static/material/compile_icon${index}.png`" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const url = 'https://pic3.zhimg.com/v2-d2cee6035f23948fd015c78584f28e4e_r.jpg?source=1940ef5c'
  // const url = 'https://pic2.zhimg.com/80/v2-184d44ae4f2f3ae0c9a23ad09d2696a1_720w.jpg'
  const srcList = [
    'https://pic3.zhimg.com/v2-d2cee6035f23948fd015c78584f28e4e_r.jpg?source=1940ef5c',
    'https://pic3.zhimg.com/v2-d2cee6035f23948fd015c78584f28e4e_r.jpg?source=1940ef5c'
    //   'https://pic2.zhimg.com/80/v2-184d44ae4f2f3ae0c9a23ad09d2696a1_720w.jpg'
  ]
  const checked1 = ref(false)
</script>

<style lang="scss" scoped>
  .layout {
    .container {
      &_img {
        position: relative;
        .checked {
          position: absolute;
          left: 13px;
        }
        .radar_icon {
          position: absolute;
          top: 10px;
          right: 12px;
          width: 22px;
          height: 22px;
          background: url('@/assets/image/material/radar.png') no-repeat;
          background-size: 100%;
          z-index: 99;
        }
      }
      &_text {
        margin-top: -4px;
        padding: 10px;
        border: 1px solid #eaeaea;
        border-top: none;
        .tagList {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #ff6b00;
          .tag_item {
            padding: 4px;
            background: #fff;
            border: 1px solid #ffc69e;
            border-radius: 2px;
            margin-right: 10px;
            cursor: pointer;
          }
        }
        .describe {
          width: 286px;
          height: 14px;
          margin: 12px 0 8px;
          line-height: 14px;
          font-size: 14px;
          display: flex;
          align-items: center;
          &_text {
            display: inline-block;
            width: 255px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .time {
          display: flex;
          justify-content: space-between;
          height: 12px;
          line-height: 12px;
          color: #969696;
          font-weight: 300;
          font-size: 12px;
        }
      }
      .iconList {
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 2px;
        border: 1px solid #eaeaea;
        border-top: none;
        .icon_item {
          width: 19px;
          height: 19px;
          padding: 7px 0 14px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
